<template>
  <div>
    <el-card class="box-card" style="width: 230px;" :style="{height: tabHt+'px'}">
      <div :style="{height: (tabHt-40)+'px'}">
        <el-scrollbar style="height: 100%;">
          <div v-for="collectPoint in collectPointList" style="cursor: pointer;border-bottom: 1px #ccc solid;line-height: 2em;"
               :class="{active: collectPoint.id==pointId}" @click="clkPointInfo(collectPoint)" class="text item">
            <span style="font-size: 0.8em;margin-left: 10px;">{{collectPoint.name }}</span>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
  </div>
</template>

<script>
  import { listCollectPoint } from "@/api/basic/collectPoint";

export default {
  name: "CollectPointList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 测点管理表格数据
      collectPointList: [],
      pointId : undefined,
      pointName:undefined,
      key:null
    };
  },
  computed: {
    tabHt(){
      return this.$store.state.app.tableHeight.pointHt
    }
  },
  created() {
    this.getList();
  },
  methods: {
    clkPointInfo(collectPoint){
      this.pointId = collectPoint.id;
      this.$emit('handlePointClick', {pointId:collectPoint.id});
    },
    /** 查询监测站点管理列表 */
    getList() {
      let obj = {
        pageNum: 1,
        pageSize: 1000
      }
      listCollectPoint(obj).then(response => {
        this.collectPointList = response.rows;
        this.clkPointInfo(this.collectPointList[0]);
      });
    }
  }
};
</script>
<style>
  .active{
    color: red;
  }
</style>
<style scoped lang="scss">
  .box-card ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
